<template>
  <div id="chargesDetails_box">
    <div class="top_bar">
      <top-bar :title="title">
        <md-icon slot="left" class="back_btn"></md-icon>
      </top-bar>
    </div>
    <div class="charges_hd">
      <p>{{cityname}}</p>
    </div>
    <p class="chargesDetails_p">未支付</p>
    <div class="charges_box">
      <div class="charges_list">
        <p class="charges_list_one">
          车费
          <span>{{orderAmt}}元</span>
        </p>
        <p class="charges_list_two" v-show="payType=='1'">一口价({{chargesNumber}}座)</p>
        <p class="charges_list_two" v-show="payType=='2'">一口价(专车)</p>
        <p class="charges_list_one">
          &nbsp;
          <span style="color:#333">预计支付金额:{{orderAmt}}元</span>
        </p>
        <!-- <p class="faremin">*车费计算四舍五入取小数点后两位，出租车费用由出租车计价器计费</p> -->
      </div>
    </div>
    <p class="seeValuationRules" @click="valuationRulesBtn">查看计价规则</p>
  </div>
</template>
<script>
import { Tabs, Icon, Field, InputItem, Toast, Dialog } from 'mand-mobile';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import TopBar from '@/components/TopBar';
import http from '@/common/http';
import Pop from '@/views/incity/popup';
var CryptoJS = require('crypto-js');
var moment = require('moment');
moment.locale('zh-cn');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [TopBar.name]: TopBar,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '费用明细',
      orderAmt: '0.00',
      payType: '',
      chargesNumber: '',
      cityname: ''
    };
  },
  mounted() {
    Loading.hide();
    if (this.$route.query.ordertype) {
      this.payType = this.$route.query.ordertype;
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单类型',
        confirmText: '确定'
      });
    }
    if (this.$route.query.ordernum) {
      this.chargesNumber = decryptByDESModeEBC(this.$route.query.ordernum);
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单人数',
        confirmText: '确定'
      });
    }
    if (this.$route.query.orderamt) {
      this.orderAmt = decryptByDESModeEBC(this.$route.query.orderamt);
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单金额',
        confirmText: '确定'
      });
    }
    if (this.$route.query.cityname) {
      this.cityname = this.$route.query.cityname;
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到城市',
        confirmText: '确定'
      });
    }
  },
  methods: {
    // 计价规则
    valuationRulesBtn() {
      this.$router.push({
        name: 'IncityUnpaidValuationRules',
        query: {
          cityid: this.$route.query.cityid
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#chargesDetails_box {
  height: 100vh;
  background-color: #fff;
}

.top_bar {
  position: absolute;
  top: 0px;
  z-index: 1000;
  width: 100%;
}

.back_btn {
  width: 22px;
  height: 38px;
}

.charges_hd {
  background-color: #fff;
  padding-top: 20px;
}

.charges_hd p {
  padding-top: 70px;
  text-align: center;
  font-size: 40px;
  color: #333;
}

.chargesDetails_p {
  font-size: 18px;
  color: #555;
  text-align: center;
  padding-top: 10px;
}

.charges_box {
  background-color: #fff;
  padding: 0px 82px 40px 82px;
}

.charges_list {
  padding-top: 24px;
}

.charges_list_one {
  font-size: 28px;
  color: #666;
  margin-top: 20px;
}

.charges_list_one.coumonative {
  color: #ff6917;
}

.charges_list_one span {
  float: right;
}

.charges_list_two {
  font-size: 22px;
  color: #999;
  margin-top: 10px;
}

.chargesAmt {
  padding-top: 40px;
  font-size: 28px;
  color: #333;
  text-align: right;
}

.charges_coupon {
  font-size: 28px;
  padding-top: 40px;
  color: #FF6917;
}

.charges_coupon span {
  float: right;
}

.estimateAmt {
  font-size: 28px;
  padding-top: 80px;
  color: #666;
  text-align: right;
}

.estimateAmt span {
  font-size: 40px;
}

.faremin {
  font-size: 22px;
  padding-top: 4px;
  color: #999;
  margin-top: 10px;
}

.refund_box {
  margin-top: 20px;
}

.payment_hd {
  text-align: center;
  margin-top: 80px;
  font-size: 28px;
  color: #333;
}

.incityType_hd {
  text-align: center;
  margin-top: 10px;
  font-size: 28px;
  color: #666;
}

.seeValuationRules {
  width: 260px;
  height: 88px;
  border-radius: 6px;
  border: 1px solid #E0E0E0;
  line-height: 88px;
  text-align: center;
  font-size: 30px;
  color: #666;
  position: absolute;
  bottom: 60px;
  left: 50%;
  margin-left: -130px;
}
</style>
